<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>周丫周生生</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body,
			html {
				width: 100%;
				height: 100%;
			}

			.BG {
				width: 1366px;
				height: 640px;
				background-image: url(http://cdn.chowsangsang.com/eshop/cn/newweb/banner_loveDecode_1450_p2.jpg);
				background-size: 100%;
				background-position: 0 -55px;
			}
		</style>
		<link rel="stylesheet" href="./styles/iconfont.css">
		<link rel="stylesheet" href="./styles/index.css">
		<link rel="stylesheet" href="./styles/swiper.min.css">
	</head>
	<body>
		<!-- 顶部 -->
		<div class="BG">
			<div class="Top">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><a href="#">中国大陆全场免运费</a> | <a href="">优先选用顺丰快递</a> | <a href="">赠PICC运输保险</a> | <a
							 href="">逾百站点支持</a> 分店取货</div>
						<div class="swiper-slide"><a href="#">首次购物买￥3000即减￥100</a> | <a href="">优惠码 ： GUODAGE</a> | 了解更多</div>
					</div>
				</div>
				<span class="close">×</span>
			</div>
		</div>
		<!-- logo图标 -->
		<div class="logo">
			<a href="#" >
				
			</a>
		</div>
		<!-- 俩小图标部分 -->
		<div class="two_small">
			<a href="">
			</a>
			<a href="">
				
			</a>
		</div>
		<!-- search区域 -->
		<div class="search">
			RMB (￥) &nbsp;&nbsp;&nbsp;&nbsp;<span class="iconfont icon-location"></span>
			<div class="iconfont icon-fangdajing" id="Inp">
			<input type="text" name="" id="" value="" placeholder="搜索"/>
			</div>
		</div>
		<!-- 登录注册位置 -->
		<div class="login">
			<i id="login_in">登录 </i>/ <i id="login_zhuce">注册 </i> &nbsp; <span class="iconfont icon-xin"></span> &nbsp;&nbsp;<span class="iconfont icon-Shapecopy"></span> &nbsp;&nbsp; <b>金价咨询</b>
		</div>
		<!-- 菜单list区域 -->
		<ul class="list">
			<li>重点推荐</li>
			<li>珠宝▽
			<!-- 二级菜单(平时隐藏) -->
				<div class="zhubao">
					<h6>全部珠宝</h6>
					<div class="biaoti">
						<h5>最新上架</h5>
						<h5>按佩戴</h5>
						<h5>按金属</h5>
						<h5>按宝石</h5>
						<h5>按设计</h5>
						<h5>专属定制</h5>
					</div>
					<div class="neirong">
						<nav>
							<a href="javascripts:void(0)" id="more">新品</a>
							<a href="">编辑推荐</a>
							<a href="">编辑推荐推介</a>
						</nav>
						<nav>
							<a href="">手镯</a>
							<a href="">手链</a>
							<a href="">项链</a>
							<a href="">串饰</a>
							<a href="">耳饰</a>
							<a href="">金片</a>
							<a href="">吊坠</a>
							<a href="">戒指</a>
							<a href="">摆件</a>
						</nav>
						<nav>
							<a href="">黄金</a>
							<a href="">18K金</a>
							<a href="">白金</a>
						</nav>
						<nav>
							<a href="">钻石</a>
							<a href="">珍珠</a>
							<a href="">彩色宝石</a>
						</nav>
						<nav>
							<a href="">手镯</a>
							<a href="">手链</a>
							<a href="">项链</a>
							<a href="">串饰</a>
							<a href="">耳饰</a>
							<a href="">金片</a>
							<a href="">吊坠</a>
							<a href="">戒指</a>
							<a href="">摆件</a>
							<a href="">吊坠</a>
							<a href="">戒指</a>
							<a href="">摆件</a>
						</nav>
						<nav>
							<a href="">关于专属定制</a>
							<a href="">Promessa duet</a>
							<a href="">钻戒定制</a>
							<a href="">Promessa enigma</a>
						</nav>
					</div>
				<div class="pic">
					<img src="https://cdn.chowsangsang.com/eshop/cn/newweb/sub_menu_banner_ild.jpg" alt="">
				</div>
			</div>
			</li>
			<li>品牌系列▽</li>
			<li>婚嫁▽</li>
			<li>礼品▽</li>
			<li>MINTYGREEN</li>
			<li>劳力士</li>
			<li>帝舵表</li>
			<li>周生生之友</li>
			<li>服务▽</li>
		</ul>
		<!-- 吸顶菜单,平常是隐藏的 -->
		<div class="xiding">
			<div class="left">
				<a href="">
				</a>
				<a href="">
					
				</a>
			</div>
			<div class="xiding_logo">
				<img src="http://cn.chowsangsang.com/sc/img/common/logo-nav.png" alt="">
			</div>
			<ul class="xiding_list">
				<li>重点推荐</li>
				<li>珠宝▽
				<div class="xiding_erji">
					<h6>全部珠宝</h6>
					<div class="biaoti">
						<h5>最新上架</h5>
						<h5>按佩戴</h5>
						<h5>按金属</h5>
						<h5>按宝石</h5>
						<h5>按设计</h5>
						<h5>专属定制</h5>
					</div>
					<div class="neirong">
						<nav>
							<a href="">新品</a>
							<a href="">编辑推荐</a>
							<a href="">编辑推荐推介</a>
						</nav>
						<nav>
							<a href="">手镯</a>
							<a href="">手链</a>
							<a href="">项链</a>
							<a href="">串饰</a>
							<a href="">耳饰</a>
							<a href="">金片</a>
							<a href="">吊坠</a>
							<a href="">戒指</a>
							<a href="">摆件</a>
						</nav>
						<nav>
							<a href="">黄金</a>
							<a href="">18K金</a>
							<a href="">白金</a>
						</nav>
						<nav>
							<a href="">钻石</a>
							<a href="">珍珠</a>
							<a href="">彩色宝石</a>
						</nav>
						<nav>
							<a href="">手镯</a>
							<a href="">手链</a>
							<a href="">项链</a>
							<a href="">串饰</a>
							<a href="">耳饰</a>
							<a href="">金片</a>
							<a href="">吊坠</a>
							<a href="">戒指</a>
							<a href="">摆件</a>
							<a href="">吊坠</a>
							<a href="">戒指</a>
							<a href="">摆件</a>
						</nav>
						<nav>
							<a href="">关于专属定制</a>
							<a href="">Promessa duet</a>
							<a href="">钻戒定制</a>
							<a href="">Promessa enigma</a>
						</nav>
						<div class="pic">
							<img src="https://cdn.chowsangsang.com/eshop/cn/newweb/sub_menu_banner_ild.jpg" alt="">
						</div>
					</div>
				</li>
				<li>品牌系列▽</li>
				<li>婚嫁▽</li>
				<li>礼品▽</li>
				<li>MINTYGREEN</li>
				<li>劳力士</li>
				<li>帝舵表</li>
				<li>周生生之友</li>
				<li>服务▽</li>
			</ul>
			<div class="right">
				<span class="iconfont icon-xin"></span> &nbsp;&nbsp;<span class="iconfont icon-Shapecopy"></span>
			</div>
		</div>
		<!-- 恭贺新禧部分 -->
		<div class="wish">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_CNY_1450.jpg" alt="">
		</div>
		<!-- 永结同心 -->
		<div class="tongxin">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_bridal2019_1450_second.jpg" >
		</div>
		<!-- 定制 -->
		<div class="dingzhi">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_promessaDuet_1450.jpg" alt="">
		</div>
		<!-- charme -->
		<div class="charme">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_charme_1450.jpg" alt="">
		</div>
		<!-- charme下面 -->
		<div class="charme_bot">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_va_1450.jpg" alt="">
		</div>
		<!-- women -->
		<div class="women">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_g_1450.jpg" alt="">
		</div>
		<!-- love -->
		<div class="love">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_ild_1450.jpg" alt="">
		</div>
		<!-- 专属 -->
		<div class="only">
			<img src="//cdn.chowsangsang.com/eshop/cn/newweb/banner_solitaire_1450.jpg" alt="">
		</div>
		<!-- last -->
		<div class="last">
			<img src="//extranet.firmstudio.com/ChowSangSang/brandsite_update_images/2019-06-11CNspotlight%20banner/CSS_fourjoys_2019_homepage_banner.jpg" alt="">
		</div>
		<!-- bottom区域最下面 -->
		<div class="bottom">
			<nav class="one">
				<a href="">
					联络我们	
				</a>
				<a href="">
					分店位置	
				</a>
				<a href="">
					网站地图
				</a>
			</nav>
			<nav class="two">
				<a href="">
					服务
				</a>
				<a href="">
					货品配送
				</a>
				<a href="">
					退货及换货
				</a>
				<a href="">
					帮助
				</a>
			</nav>
			<nav class="three">
				<a href="">
					周生生集团
				</a>
				<a href="">
					愿景及品牌理念
				</a>
				<a href="">
					历史传承与里程碑
				</a>
				<a href="">
					珠宝品质与工艺
				</a>
				<a href="">
					加入我们
				</a>
				<a href="">
					不想写了
				</a>
			</nav>
			<nav class="four">
				<a href="">
					关注我们
				</a>
				<a href="">
					三个图标
				</a>
				<a href="">
					顾客服务:(+86) 400 830 1878
				</a>
			</nav>
			<nav class="five">
				<a href="">
					付款方式
				</a>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
				<div>
					<img src="//cdn.chowsangsang.com/eshop/cn/newweb/icon/hp_icon_unionPay.png">
				</div>
			</nav>
			<div class="bottom_last">
				<div class="bottom_left">
					 ©  2019周生生集团国际有限公司
				</div>
				<div class="bottom_right">
					<a href="">
						隐私政策
					</a>
					<a href="">
						cooklie政策
					</a>
					<a href="">
						条款及细则
					</a>
					<a href="">
						粤ICP备12061196号-3
					</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="./javascripts/libs/jquery.js"></script>
	<script type="text/javascript" src="./javascripts/libs/swiper.min.js"></script>
<!-- 	<script type="text/javascript" src="../src/twolist.js"></script> -->
	<script type="text/javascript">
		// 顶层轮播图
		var mySwiper = new Swiper('.swiper-container', {
			direction: 'horizontal',
			loop: true,
			autoplay: true,
			grabCursor: true,
			speed: 300,
			pagination: {
				el: '.swiper-pagination',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			}
		})
		// 关闭顶层栏目
		$('.close').click(function() {
			$('.Top').hide()
		})
		//二级菜单的隐藏和现实
		$('.list').children().eq(1).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(2).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(3).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(4).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().eq(9).mouseenter(function(){
			$('.zhubao').stop().slideDown()
		})
		$('.list').children().mouseleave(function(){
			$('.zhubao').stop().slideUp()
		})
		//吸顶菜单的隐藏和显示
		$(window).scroll(function(e){
			if($(window).scrollTop() >= 100){
				$('.xiding').show()
			}else{
				$('.xiding').hide()
			}
		})
		//吸顶菜单的二级导航
		$('.xiding').children().eq(1).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(2).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(3).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(4).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().eq(9).mouseenter(function(){
			$('.xiding_erji').stop().slideDown()
		})
		$('.xiding').children().mouseleave(function(){
			$('.xiding_erji').stop().slideUp()
		})
		// console.log($('.xiding').children('.xiding_list').children().eq(1)) 
	</script>
	<!-- 登录跳转 -->
	<script type="text/javascript">
		var login_in = document.getElementById('login_in')
		login_in.onclick = function(){
			location.assign('./login.html')
		}
		var login_zhuce = document.getElementById('login_zhuce')
		login_zhuce.onclick = function(){
			console.log('www')
			location.assign('http://localhost:3000/login.html')
		}
		
	</script>
	<script type="text/javascript">
		var more = document.getElementById('more')
		more.onclick = function(){
			console.log('wwww')
			location.assign('http://localhost:3000/moremsg.html')
		}
	</script>
	
</html>